<template>
  <view class="dh-popup">
    <view v-show="maskShow" class="mask" @click="hide" @touchmove.stop.prevent="moveHandle" />
    <view v-if="maskShow" :class="{ popupbottom: maskShow }" class="popupContent">
      <view class="search-content">
        <view class="serch-input flex items-middle">
          <input v-model="key" type="text" @focus="getSearchword('focus')"/>
          <button @click="toCustom" class="submit-btn">确定</button>
        </view>
        <scroll-view v-if="searchList.length" class="search-list-content" scroll-y="true">
          <view class="list-content">
            <view @click="addCus(v)" class="list-item" v-for="(v,j) in searchList" :key="j">{{v}}</view>
          </view>
        </scroll-view>
      </view>
      <view class="key-content" @click="getSearchword('blur')">
        <view
          class="key-item"
          :class="item.check === true ? 'active' : ''"
          v-for="(item,index) in keyData"
          :key="index"
          @click="selectKey(item,index)"
        >{{item.name}}</view>
      </view>
      <view class="key-content" @click="getSearchword('blur')">
        <view class="key-lable">已选关键字：</view>
        <view class="key-item active" v-for="(h,e) in selectList" :key="e+'1'">
          {{h.name}}
          <image @click="deleteSelect(h,e)" src="../static/cancel.png"></image>
        </view>
        <view class="key-item active" v-for="(k,i) in customList" :key="i">
          {{k}}
          <image @click="deleteCusSelect(k,i)" src="../static/cancel.png"></image>
        </view>
      </view>
      <view class="bottom flex items-middle space-between">
      <view class="btn cancel-btn" @click="hide">取消</view>
      <view class="btn submit-btn" @click="submit">确定</view>
    </view>
    </view>
    
  </view>
</template>

<script>
import { getMobileDepartmentKeywords } from "../util/api/policy.js";
import { debounce } from "../util/debounce.js";
export default {
  name: "TkPopup",
  data() {
    return {
      departId: '',
      maskShow: false,
      showList: "",
      key: "",
      searchList: [],
      keyData: [],
      selectList: [],
      customList: []
    };
  },
  watch: {
    key: debounce(function(e) {
      this.key = e.trim();
      if (e.trim() !== "") {
        this.getKeywordList(1);
      } else {
        this.searchList = [];
      }
    }, 1000)
  },
  onLoad() {},
  methods: {
    open(id) {
      this.departId = id
      this.maskShow = true;
      this.getKeywordList();
    },
    hide() {
      this.maskShow = false;
      this.searchList = [];
      this.keyData = [];
      this.selectList = [];
      this.customList = []
    },
    getSearchword(type) {
      if(type === 'blur'){
        this.key = ''
        this.searchList = []
      }
      // console.log(22222222222);
    },
    getKeywordList(type) {
      getMobileDepartmentKeywords({ keywords: this.key }).then(res => {
        if (type === 1) {
          this.searchList = res.result;
        } else {
          let arr = [];
          arr = res.result.slice(0, 20);
          arr.forEach(item => {
            let obj = {
              name: item,
              check: false
            };
            this.keyData.push(obj);
          });
        }
      });
    },
    selectKey(item, index) {
      item.check = !item.check;
      let obj = {
        index: index
      };
      if (item.check) {
        this.selectList.push(Object.assign(obj, item));
      }
    },
    deleteSelect(item,index) {
      this.keyData[item.index].check = false;
      this.selectList.splice(index, 1);
    },
    // 自定义关键字添加
    toCustom() {
      if (this.key.trim() !== "") {
        this.customList.push(this.key);
        this.customList = Array.from(new Set(this.customList));
        this.key = "";
      } else {
        uni.showToast({
          title: "请输入关键字!",
          duration: 2000,
          icon: "none"
        });
      }
    },
    addCus(value){
      this.customList.push(value);
      this.customList = Array.from(new Set(this.customList));
    },
    deleteCusSelect(item,index) {
      this.customList.splice(index, 1);
    },
    submit() {
      let arr = [];
      this.selectList.map(item => {
        arr.push(item.name);
      });
      // console.log('------------',arr)
      let params = Array.from(new Set([...arr, ...this.customList]));
      // console.log('------------',params)
      let keywords = params.join("|");
      // console.log('------------',keywords)
      this.$emit("onSubmit", this.departId, keywords);
      this.hide()
    }
  }
};
</script>

<style lang="less" scoped>
.dh-popup {
  .mask {
    position: fixed;
    z-index: 9998;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  .popupContent {
    width: 100%;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    position: fixed;
    left: 50%;
    backface-visibility: hidden;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    z-index: 9999;
    transform: translate3d(-50%, 100%, 0);
  }
  .search-content {
    width: 100%;
    position: relative;
    .serch-input {
      input {
        border: 1rpx solid #ddd;
        height: 70rpx;
        line-height: 70rpx;
        padding: 0 20rpx;
        width: 70%;
        font-size: 28rpx;
        border-radius: 10rpx;
      }
      .submit-btn {
        background: #44a2ff;
        height: 60rpx;
        line-height: 60rpx;
        width: 120rpx;
        text-align: center;
        color: #fff;
      }
    }
    .search-list-content {
      width: 70%;
      position: absolute;
      max-height: 300rpx;
      background: #ffffff;
      z-index: 99;
      font-size: 24rpx;
      box-shadow: 0 10rpx 32rpx 0 rgba(208, 220, 255, 0.43);
      .list-content {
        padding: 0 20rpx;
        .list-item {
          padding: 20rpx 0;
          border-bottom: 1rpx solid #ddd;
        }
      }
    }
  }
  .key-content {
    width: 100%;
    background: #fff;
    padding: 20rpx 0;
    box-sizing: border-box;
    .key-lable {
      font-size: 32rpx;
      font-weight: 500;
    }
    .key-item {
      display: inline-block;
      padding: 8rpx 10rpx;
      border-radius: 10rpx;
      margin: 10rpx;
      // background: burlywood;
      position: relative;
      image{
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 34rpx;
        height: 34rpx;
      }
    }
    .active {
      background: #44a2ff;
      color: #fff;
    }
  }
  .popupbottom {
    top: auto;
    right: auto;
    top: 0;
    transition: 0.2s ease-out;
    transform: translate3d(-50%, 0, 0);
  }
  .bottom{
    width: 100%;
    .btn{
      padding: 0 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 10rpx;
    }
    .cancel-btn{
      background: #ddd;
    }
    .submit-btn{
      background: #44a2ff;
      color: #fff;
    }
  }
}
</style>
